<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	#import {
		position: relative;
		top: 1.4px;
	}
</style>
<div class="page-header">
	<h1>
		一体机任务列表
	</h1>
</div>
<div class="col-xs-12 content-filter">
	<div class="widget-box">
		<div class="widget-header" style="vertical-align:middle;">
			<h4 class="widget-title">
				内容筛选
			</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main">
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">用户姓名</label>
					<div class="keyword-search-box">	
                        <input style="float:left;height:30px;width:220px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;-moz-border-radius:10px 0 0 10px;" type="text" name="realname" placeholder="搜索用户姓名..." autocomplete="off">
                        <span id="empty-search" style="position:relative;right:64px;cursor:pointer;display:none;">×</span>
                        <button id="btn-search" class="btn-search" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;background-color:#669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;">
                            <i class="ace-icon fa fa-search nav-search-icon white"></i>
                        </button>
					</div>
				</div>
                <div class="form-inline keyword-search-div">
					<label class="keyword-search-label">一体机ID</label>
					<div class="keyword-search-box" id="div-aio">
						<a href="javascript:;" class="keyword-search-keyword active" data-id="0">全部</a>
						<?php foreach($aioList as $aio): ?>
							<a href="javascript:;" class="keyword-search-keyword" data-value="<?= $aio['id'] ?>"><?= $aio['facesluice_id'] ?></a>
						<?php endforeach; ?>
					</div>
				</div>
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">任务类型</label>
					<div class="keyword-search-box" id="div-task-type">
						<a href="javascript:;" class="keyword-search-keyword active" data-value="">全部</a>
						<a href="javascript:;" class="keyword-search-keyword" data-value="1">新增</a>
						<a href="javascript:;" class="keyword-search-keyword" data-value="2">修改</a>
						<a href="javascript:;" class="keyword-search-keyword" data-value="3">删除</a>
					</div>
				</div>
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">任务状态</label>
					<div class="keyword-search-box" id="div-task-state">
						<a href="javascript:;" class="keyword-search-keyword active" data-value="">全部</a>
						<a href="javascript:;" class="keyword-search-keyword" data-value="1">待处理</a>
						<a href="javascript:;" class="keyword-search-keyword" data-value="2">完成</a>
						<a href="javascript:;" class="keyword-search-keyword" data-value="3">失败</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="col-xs-12">
	<table id="dynamic-table" class="table table-striped table-bordered table-hover" style="margin-top:10px">
		<thead>
			<tr>
				<th>一体机ID</th>
				<th>用户姓名</th>
				<th>用户类型</th>
				<th>任务类型</th>
				<th>任务状态</th>
				<th>任务状态描述</th>
				<th>任务创建时间</th>
				<th>任务完成时间</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	$(function(){
		// 一体机表格
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('school/get_aio_task_list')?>',
			"columns": [
	            {"data": "facesluice_id"},
	            {"data": "user_name"},
				{"data": "user_type_format"},
				{"data": "task_type_format"},
				{"data": "task_state_format"},
				{"data": "task_state_desc"},
				{"data": "createtime"},
				{"data": "updatetime"},
			]
		});
		// 点击关键字
		$("body").on("click", ".keyword-search-keyword", function(){
			var id = $(this).data("id");
			// 高亮当前点击对象
			$(this).parent().find(".keyword-search-keyword").removeClass("active");
			$(this).addClass("active");
			search(table);
		});
		// 敲回车就搜索
		$("[name=realname]").keypress(function (e) {
                if (e.which == 13) {
                    $("#btn-search").trigger("click");
                }
		});
		// 清空搜索框
		$("[name=realname]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=realname]").val('');
					$(this).hide();
					// 重置搜索结果
					search(table);
				})
			} else {
				$("#empty-search").hide();
			}
		}); 
		// 搜索标题
		$("#btn-search").click(function() {
			search(table);
		});
	})
	function search(table) {
		// console.log( $("#div-task-state .active").data('value'));
		table.setAjaxData({
			"realname": $("[name=realname]").val(),
			"aio_id": $("#div-aio .active").data('value'),
			"task_state": $("#div-task-state .active").data('value'),
			"task_type": $("#div-task-type .active").data('value')
		});
	}
</script>